
<style>
  .user-wishlist-box{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .user-wishlist-box .wishlist-product-item{
    width: 100%;
    overflow: hidden;
    cursor: pointer;
  }
  .wishlist-product-item .wishlist-product-image{
    padding-top: 100%;
    display: block;
    position: relative;
  }
  .wishlist-product-item .wishlist-product-image img{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wishlist-product-item .wishlist-product-content{
    padding: 20px 0;
  }
  .wishlist-product-title{
    display: block;
    text-align: center !important;
  }
  .wishlist-product-item .wishlist-product-price{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
  }
  .wishlist-product-item .wishlist-product-soldout{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
    background: rgba(51, 51, 51, .3);
    border-radius: 60px 60px 60px 60px;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    line-height: 120px;
    z-index: 20;
  }
  .wishlist-product-item  .wishlist-product-quickview{
    position: absolute;
    top:10px;
    left: 10px;
    width: 36px;
    height: 36px;
    background: rgba(51, 51, 51, .7);
    border-radius: 30px;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    z-index: 20;
    display: none;
  }

  .user-wishlist-box .wishlist-product-item:hover .wishlist-product-quickview{
    display: flex;
  }
  .wishlist-product-item .wishlist-product-link{
    position: absolute;
    bottom:10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }
  .wishlist-product-item .wishlist-product-link .on{
    position: absolute;
    top:0;
    left:0;
    z-index:100;
  }
  .wishlist-product-item .wishlist-product-link .active{
    position: absolute;
    top:1px;
    left:1px;
    z-index:110;
  }
  @media screen and (max-width: 845px) {
    .user-wishlist-box{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .wishlist-product-item  .wishlist-product-quickview{
      display: flex;
    }
    .wishlist-product-item .wishlist-product-soldout{
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
</style>



<div class="container_wrapper">
  <h2 class="title">{{lang.account.default.my_wishlist  | upcase }}</h2>
  {% assign length = account_wishlist.wishlist | size %}
  {% if length %}
    <div class="user-wishlist-box">
    {% for item in account_wishlist.wishlist %}
    {% assign product = item.productInfo %}
    {% capture product_handle %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}{% endcapture %}
    <div class="wishlist-product-item">
      <div  class="wishlist-product-image">
        {% if product.status == 1 and theme_config.global.product_preview  %}
        <div class="wishlist-product-quickview product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}" >
          <svg t="1679549187129" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5175" width="20" height="20">
            <path fill="#ffffff" d="M512 307.2a387.072 387.072 0 0 0-350.3104 223.3344 387.072 387.072 0 0 0 350.3104 223.3344 387.072 387.072 0 0 0 350.3104-223.3344A387.072 387.072 0 0 0 512 307.2m0-102.4a488.7552 488.7552 0 0 1 460.8 325.7344 488.7552 488.7552 0 0 1-460.8 325.7344 488.7552 488.7552 0 0 1-460.8-325.7344 488.7552 488.7552 0 0 1 460.8-325.7344z" p-id="5176"></path>
            <path d="M512 512m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#ffffff" p-id="5177"></path>
          </svg>
        </div>
        {% endif %}

        <div class="wishlist-product-link" data-id="{{product.id}}" data-index="{{forloop.index0}}">
          <svg t="1680157391870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5859" width="22" height="22"><path d="M684.125091 96.116364a241.431273 241.431273 0 0 1 210.944 70.376727 262.842182 262.842182 0 0 1 81.035636 217.693091 380.276364 380.276364 0 0 1-122.554182 229.608727c-20.014545 19.502545-73.821091 72.238545-151.04 147.968l-108.916363 107.054546-36.212364 35.514181-14.382545 13.963637a44.218182 44.218182 0 0 1-61.998546 0l-124.928-122.88-26.437818-25.879273-159.138909-155.741091a380.136727 380.136727 0 0 1-122.507636-229.608727 262.795636 262.795636 0 0 1 81.035636-217.693091 241.477818 241.477818 0 0 1 210.944-70.376727 359.098182 359.098182 0 0 1 172.218182 83.781818 359.424 359.424 0 0 1 172.218182-83.781818z" fill="#F11752" p-id="5860"></path><path d="M722.618182 46.731636a290.071273 290.071273 0 0 1 204.8 86.621091 308.130909 308.130909 0 0 1 94.859636 255.720728 425.751273 425.751273 0 0 1-136.331636 258.234181c-19.549091 19.037091-73.122909 71.586909-150.946909 147.874909l-29.277091 28.718546-79.685818 77.963636-50.594909 49.664a90.810182 90.810182 0 0 1-127.208728 0l-151.412363-148.945454-158.952728-155.415273A425.611636 425.611636 0 0 1 1.629091 388.980364a308.084364 308.084364 0 0 1 94.859636-255.720728 290.117818 290.117818 0 0 1 204.8-86.621091 299.380364 299.380364 0 0 1 45.568 3.537455A388.933818 388.933818 0 0 1 512 121.204364a389.12 389.12 0 0 1 164.957091-71.121455 299.101091 299.101091 0 0 1 45.661091-3.351273zM512 883.479273l49.012364-48.081455 79.639272-78.196363 29.277091-28.718546c79.127273-77.451636 131.258182-128.651636 151.133091-148.061091a334.801455 334.801455 0 0 0 108.730182-200.983273 216.762182 216.762182 0 0 0-67.211636-179.665454 196.235636 196.235636 0 0 0-139.962182-59.950546 205.777455 205.777455 0 0 0-31.371637 2.46691 315.438545 315.438545 0 0 0-149.457454 73.728l-29.789091 24.808727-29.789091-24.855273a315.066182 315.066182 0 0 0-149.410909-73.681454 206.010182 206.010182 0 0 0-31.371636-2.46691 196.282182 196.282182 0 0 0-139.962182 60.183273 216.715636 216.715636 0 0 0-67.211637 179.665455 334.754909 334.754909 0 0 0 108.683637 200.983272l185.623273 181.527273z" fill="#FFFFFF" p-id="5861"></path></svg>
        </div>



        {% if product.status == 0 %}
          <div class="wishlist-product-soldout">{{ lang.account.wishlist.product_offline }}</div>
        {% else %}
          {% if product.available != 1  %}
            <div class="wishlist-product-soldout">{{ lang.general.sold_out }}</div>
          {% endif %}
        {% endif %}


        {%- capture product_alt -%}
        {%- if product.image.alt == "" -%}
          {{ product.title }}
          {%- else -%}
          {{ product.image.alt }}
        {%- endif -%}
        {%- endcapture -%}
          <a href="{{product_handle}}">
            {% include 'lazy_img',src:product.src,  alt:product_alt %}
          </a>
      

      
      </div>
      <div class="wishlist-product-content">
        <div class="{% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
          <a class="{% if theme_config.global.product_title_style == 'hide' %}line-clamp1 {% else %}wishlist-product-title {% endif %}  " href="{{product_handle}}"> {{ product.title }}</a>
        </div>
        <div class="wishlist-product-price">
          <span class="general_buying-color">{{ product.variant.price | money }}</span>
          {% if product.variant.compare_at_price != "0" %}
          <span class="general_original-color">{{product.variant.compare_at_price | money}}</span>
          {% endif %}

        </div>
      </div>

    </div>
    {% endfor %}  
  </div>

  {% include pagination ,{paginate:paginate } %}
  {% else %}

  {% include "empty" , text:lang.account.wishlist.empty_list,icon:'wishlist',btnText:lang.account.wishlist.shop_now,isBtn:true,href:"/" %}
  {% endif %}

  <div class="back-box">
    <a href="/account">
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{ lang.account.default.account }}</span>
    </a>
  </div>
</div>

<script>

  $(function(){
    var wishlist = {{account_wishlist.wishlist|json}};
    console.log(wishlist);
    function getMetaContent(metaName){
      const metas = document.getElementsByTagName("meta");
      for (let i = 0; i < metas.length; i++) {
          if (metas[i].getAttribute("name") === metaName) {
              return metas[i].getAttribute("content");
          }
      }
      return "";
    }
    $(".wishlist-product-link").click(function(){
      var product = wishlist[$(this).data("index")].productInfo;
      var collectParams = {
            "hit_type_category": "remove_from_wishlist ",
            "hit_type_name": "wish_product",
            "hit_type_lable": "product",
            ec_data:{
              ec_data_id: product.id,
              ec_data_from: 'wishlist',
              ec_data_name: encodeURIComponent(product.title),
              ec_data_price: product.variant.price,
              ec_data_discount_price: product.variant.price,
              ec_data_spu: product.spu,
              ec_data_image: product.src,
              ec_data_category: product.product_type,
              ec_data_uniq_id: product.id,
              ec_data_sku: product.variant.sku,
              ec_data_sku_code: product.variant.sku_code,
              ec_data_quantity: 1,
              ec_data_sku_name: product.variant.sku_value,
              ec_currency_code: oemcart_base_currency_code,
              ec_data_action_type: "view_content"
            },
            hit_type:"event",
            hit_type_value:0,
            pv_id: window.oemcart_pv_id || "",
            store_id: window.oemcart_store_id || "",
            document_location_url: encodeURIComponent(window.location.href),
            document_location_title: document.title,
            meta_keywords: getMetaContent("keywords"),
            prev_url: document.referrer,
            vid: window.oemcart_global_unique_id || "",
            rnd: Math.random()
        };

        moi.confirm({
          title: '{{lang.account.wishlist.remove_item_confirm}}',
          ok: function () {
            moi.ajax({
              url: "/wishlist",
              type: "DELETE",
              data: JSON.stringify({
                  product_id: product.id,
                  event:collectParams
              }),
              success: function (ret) {
                if (!ret.code) {
                  location.reload()
                }else{
                  moi.alert({ title: ret.msg });
    
                }
              }
          });
          }
      })
     
    })
  })
</script>